<template>
    <el-form :inline="true" size="small">
        <el-form-item>
            <el-input v-model="filter.name" @change="doSearch" type="text" clearable>
                <el-button slot="append" @click="doSearch">
                    <i class="el-icon-search"></i> 搜索
                </el-button>
            </el-input>
        </el-form-item>
        <el-form-item>
            <partition-selection v-model="filter.partitionId" @change="doSearch" width="120px"></partition-selection>
        </el-form-item>
        <el-form-item>
            <el-select @change="doSearch" placeholder="话题上线状态" clearable v-model="filter.isOnline" style="width:100px">
                <el-option label="未上线" value="false"></el-option>
                <el-option label="已上线" value="true"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
</template>

<script>
import Vue from "vue";
import PartitionSelection from "../partition/selection";

Vue.component(PartitionSelection.name, PartitionSelection);

export default {
    data() {
        return {};
    },
    props: {
        filter: Object,
        default: function() {
            return { name: null, isOnline: false, partitionId: null };
        }
    },
    model: { event: "search", prop: "filter" },
    methods: {
        doSearch: function() {
            this.$emit("search", this.filter);
        }
    }
};
</script>
